<!--
 * @Description  : 饼图
 * @Autor        : 杜康
 * @Date         : 2023-04-18 13:42:27 +0800
 * @LastEditors  : 杜康
 * @LastEditTime : 2023-04-22 15:12:05 +0800
-->
<template>
  <VCharts :option="options" :style="{ height: `${height}px`}" :autoresize="true" />
</template>

<script>
import { getChartColor } from "@/utils/utils.js";
import mixins from "./mixins";
export default {
  name: "PieChart",
  mixins: [mixins],
  props: {},
  methods: {
    /**
     * @description: 初始化
     * @return {*}
     * @author: 杜康
     * @Date: 2023-04-04 13:41:33 +0800
     */
    init() {
      this.handleHBar();
    },
    /**
     * @description: 处理饼图
     * @return {*}
     * @author: 杜康
     * @Date: 2023-04-04 13:43:33 +0800
     */
    handleHBar() {
      const { type, typeName, xData, xName, yData, yName, series, min, max } = this.data;

      this.options = {
        tooltip: {
          show: true,
          trigger: "item",
          formatter: "{a} <br/>{b}: {d}%",
        },
        legend: {
          orient: "vertical",
          icon: "circle",
          x: "50%",
          y: "center",
          itemWidth: 10,
          itemGap: 30,
          align: "left",
          textStyle: {
            rich: {
              fontSize: 16,
              color: "#666",
              a: {
                width: 45,
                align: "left",
              },
              b: {
                width: 60,
                align: "right",
              },
              c: {
                width: 95,
                align: "right",
              },
            },
          },
          formatter: function (name) {
            let res = series.filter((v) => v.name === name);
            res = res[0];
            return `{a|${name}}  {c|${res.pt}%}`;
          },
        },
        color: ["#3398FF", "#2ADA91", "#FFA633", "#FFC333", "#687AFF"],
        series: [
          {
            name: "区域",
            type: "pie",
            radius: ["40%", "60%"],
            center: ["25%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: series,
          },
        ],
      };
      // 强制刷新
      this.$forceUpdate();
    },
  },
};
</script>
